<template>
  <button
    class="form-button"
    :class="buttonClass"
    :style="buttonStyle"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <!-- 加载状态 -->
    <view v-if="loading" class="form-button__loading">
      <text class="form-button__loading-icon">⟳</text>
    </view>

    <!-- 图标 -->
    <view v-if="icon && !loading" class="form-button__icon">
      <text class="form-button__icon-text">{{ icon }}</text>
    </view>

    <!-- 按钮文本 -->
    <text class="form-button__text">{{ text }}</text>
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// Props
interface Props {
  text?: string
  type?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'text'
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
  icon?: string
  block?: boolean
  round?: boolean
  plain?: boolean
  customClass?: string
  backgroundColor?: string
  textColor?: string
}

const props = withDefaults(defineProps<Props>(), {
  text: '',
  type: 'primary',
  size: 'medium',
  disabled: false,
  loading: false,
  block: false,
  round: false,
  plain: false,
  customClass: ''
})

// Emits
const emit = defineEmits<{
  click: [event: any]
}>()

// 计算属性
const buttonClass = computed(() => {
  return [
    `form-button--${props.type}`,
    `form-button--${props.size}`,
    {
      'form-button--disabled': props.disabled,
      'form-button--loading': props.loading,
      'form-button--block': props.block,
      'form-button--round': props.round,
      'form-button--plain': props.plain
    },
    props.customClass
  ]
})

const buttonStyle = computed(() => {
  const style: any = {}

  if (props.backgroundColor) {
    style.backgroundColor = props.backgroundColor
  }

  if (props.textColor) {
    style.color = props.textColor
  }

  return style
})

// 方法
/**
 * 处理点击事件
 */
const handleClick = (event: any) => {
  if (props.disabled || props.loading) {
    return
  }
  emit('click', event)
}
</script>

<style lang="scss" scoped>
.form-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  // 尺寸
  &--small {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }

  &--medium {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
  }

  &--large {
    height: 48px;
    padding: 0 24px;
    font-size: 16px;
  }

  // 类型样式
  &--primary {
    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    color: #ffffff;

    &:active {
      background: linear-gradient(135deg, #096dd9 0%, #0050b3 100%);
    }

    &--plain {
      background: transparent;
      color: #1890ff;
      border: 1px solid #1890ff;

      &:active {
        background: rgba(24, 144, 255, 0.1);
      }
    }
  }

  &--secondary {
    background: #f5f5f5;
    color: #333;

    &:active {
      background: #e8e8e8;
    }

    &--plain {
      background: transparent;
      color: #666;
      border: 1px solid #d9d9d9;

      &:active {
        background: #fafafa;
      }
    }
  }

  &--success {
    background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
    color: #ffffff;

    &:active {
      background: linear-gradient(135deg, #389e0d 0%, #237804 100%);
    }

    &--plain {
      background: transparent;
      color: #52c41a;
      border: 1px solid #52c41a;

      &:active {
        background: rgba(82, 196, 26, 0.1);
      }
    }
  }

  &--warning {
    background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
    color: #ffffff;

    &:active {
      background: linear-gradient(135deg, #d48806 0%, #ad6800 100%);
    }

    &--plain {
      background: transparent;
      color: #faad14;
      border: 1px solid #faad14;

      &:active {
        background: rgba(250, 173, 20, 0.1);
      }
    }
  }

  &--danger {
    background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
    color: #ffffff;

    &:active {
      background: linear-gradient(135deg, #cf1322 0%, #a8071a 100%);
    }

    &--plain {
      background: transparent;
      color: #ff4d4f;
      border: 1px solid #ff4d4f;

      &:active {
        background: rgba(255, 77, 79, 0.1);
      }
    }
  }

  &--text {
    background: transparent;
    color: #1890ff;
    padding: 0 8px;

    &:active {
      background: rgba(24, 144, 255, 0.1);
    }
  }

  // 状态样式
  &--disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &--loading {
    cursor: wait;
  }

  // 布局样式
  &--block {
    width: 100%;
    display: flex;
  }

  &--round {
    border-radius: 999px;
  }

  // 子元素样式
  &__loading {
    margin-right: 8px;
  }

  &__loading-icon {
    display: inline-block;
    animation: spin 1s linear infinite;
  }

  &__icon {
    margin-right: 8px;
  }

  &__text {
    display: inline-block;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>